import { PropsWithChildren } from "react";
import { ThemeProvider, createTheme } from "@mui/material/styles";

const theme = createTheme({
  components: {
    MuiInput: {
      styleOverrides: {
        root: {
          backgroundColor: "#37424B",
          overflow: "hidden",
          padding: "8px",
          transition: "none",
          letterSpacing: "0.15008px",
        },
      },
    },
    MuiButton: {
      styleOverrides: {
        contained: {
          backgroundColor: "#E95513 !important",
          color: "white !important",
          border: "none !important",
          outline: "none !important",
        },
        sizeSmall: {
          fontSize: "13px",
          letterSpacing: "0.45712px",
        },
        text: {
          backgroundColor: "transparent !important",
          color: "#E95513 !important",
          border: "none !important",
          outline: "none !important",
        },
      },
    },
    MuiTooltip: {
      defaultProps: {
        sx: { transition: "none", margin: 0 },
        arrow: true,
      },
      styleOverrides: {
        popper: {
          transition: "none",
        },
        tooltip: {
          fontSize: 12,
        },
        arrow: {
          transition: "none",
        },
      },
    },
    MuiInputBase: {
      styleOverrides: {
        root: {
          fontSize: "16px",
          padding: "8px",
          lineHeight: "23px",
        },
      },
    },
  },
  palette: {
    primary: {
      main: "#E95513 !important",
      dark: "#E9551380 !important",
      light: "#fff",
    },
    text: {
      primary: "#F7F7F7 !important",
      secondary: "#C5CBE0 !important",
    },
  },
});

export default function MUiTheme({ children }: PropsWithChildren) {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}
